<template>
    <el-button class="login-codeforce" type="primary" @click="login">
        {{ user?.codeforcesoption?.handle || '请登录codeforces' }}
        <el-dialog v-model="dialogVisible" title="请输入CodeForces账号" width="600px" append-to-body destroy-on-close>
            <el-form :model="form" label-width="120px">
                <el-form-item label="Handle/Email">
                    <el-input v-model="form.codeforcesemail" />
                </el-form-item>
                <el-form-item label="Password">
                    <el-input type="password" v-model="form.codeforcespassword" />
                </el-form-item>
                <el-form-item label="" :label-width="100">
                    <ol>
                        <li><small>题目来自于CodeForces，代码评测将在CodeForces网站完成</small></li>
                        <li><small>请填写CodeForces帐号（需已在<a href="https://codeforces.com/"
                                    target="_blank">CodeForces.com</a>进行注册）</small></li>
                        <li><small>更多说明：<a href="https://oj.hterobot.com/#/article/100041"
                                    target="_blank">《RemoteJudge说明》</a></small></li>
                    </ol>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit" :loading="loading">登录</el-button>
                </span>
            </template>
        </el-dialog>
    </el-button>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { assign } from 'lodash-es';
import { computed, reactive, ref } from 'vue';
import { useStore } from 'vuex';
import { asynclogincodeforces } from '../../../api';
import { Storekey } from '../../../interface';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
const dialogVisible = ref(false)
const store = useStore(Storekey)
const user = computed(() => {
    return store.state.user
})

const loading = ref(false)

const form = reactive<Studycodemodel.Iuser>({
    codeforcesemail: '',
    codeforcespassword: ''
})
const p = defineProps()

function login() {
    dialogVisible.value = true
}

async function submit() {
    loading.value = true

    try {
        await asynclogincodeforces(assign(user.value, form))
        await store.dispatch('actiononline')
        ElMessage.success('登录成功')
        dialogVisible.value = false
    } catch (error: any) {
        ElMessage.error(error)
    }
    loading.value = false

}

defineExpose({
    login
})

</script>

<style scoped>
.login-codeforce {
    margin: auto;
    width: 200px;
    height: 40px;
    border-radius: 4px;
}
</style>